<template>
	<div class="personal">
		<div class="warrp">
			<div class="iconfont back-icon" v-show="false" @click="backGo">&#xe624;</div>
			<div class="header-title">完善信息</div>
			<div class="avatar">
				<div class="upload_imgs" id="uploadImgs" @click.stop="autoClick()">
					<img class="avatar-img" v-if="lenImg0 === 0" :src="avatar"/>
					<img class="avatar-img" v-if="imgU0" id="showImg" :src="imgU0" />								
					<input type="file" accept="image/*,type/face" @change="onFileChange0" style="display:none;" id="upfile0">
				</div>		
				<!--<div class="desc">点击修改店铺头像</div>-->
			</div>
			<div class="bg-img">
				<img :src="avatar" height="100%" width="100%" alt="" />				
			</div>
			<div class="drop"></div>
		</div>
		<div class="content">
			<group label-width="5.5em" label-margin-right="2em" >
				<x-input :disabled="true" title="店铺名称" v-model="shopName" :readonly="true"></x-input>
		    	<!--<popup-radio  title="主营业务" :options="storeCates" v-model="activityType" placeholder="请选择主营业务"></popup-radio>  -->
		    	<x-input title="身份证姓名" :is-type="'china-name'" v-model="userName" placeholder="请输入您身份证上的姓名"></x-input>
		    	<x-input @on-blur="idCardVaild" :min="15" :max="18" title="身份证号码" v-model="idCard" placeholder="请输入您的身份证号码"></x-input>
		    	<div class="id-cart vux-1px-t">
			    	<div class="left">身份证照</div>
			    	<div class="right">
			    		<div class="upload_imgs" id="uploadImgs" @click.stop="autoClick(1)">
			    			<div class="desc iconfont" v-if="lenImg1 === 0">&#xe601;</div>
			    			<div class="uploading" v-show="loadingUp"><spinner :type="'ios'"></spinner></div>
							<img v-if="imgU1" id="showImg" :src="imgU1" />								
							<input type="file" accept="image/*,mode/camera,type/cid_front" @change="onFileChange1" style="display:none;" id="upfile1">
						</div>
			    	</div>
		    	</div>
		    	<div class="id-cart vux-1px-t" v-show="storeType == 14733">
			    	<div class="left">营业执照</div>
			    	<div class="right">
			    		<div class="upload_imgs" id="uploadImgs" @click.stop="autoClick(2)">
			    			<div class="desc iconfont" v-if="lenImg2 === 0">&#xe601;</div>
			    			<div class="uploading" v-show="loadingUp"><spinner :type="'ios'"></spinner></div>
							<img v-if="imgU2" id="showImg" :src="imgU2" />								
							<input type="file" accept="image/*,mode/camera,type/company" @change="onFileChange2" style="display:none;" id="upfile2">
						</div>
			    	</div>
		    	</div>
			</group>
			<div class="split"></div>
	    	<div class="vali-store">
	    		<h4 class="title">
	    			店铺产品验证
	    			<span style="color: #9a9a9a;">请完成以下产品的验证</span>
	    		</h4>
	    		<div class="vali-content">
	    			<div class="avatar">
	    				<img :src="storeVali.pic" height="100%" width="100%" />
	    			</div>
	    			<div class="vali-desc">
	    				<p class="desc">
	    					请将数字“<span style="color: deepskyblue;">{{storeVali.numb}}</span>”添加至该商品标题尾处完成
	    					验证，然后点击“店铺验证”
	    				</p>
	    				<p class="desc2">{{storeVali.title}}{{storeVali.numb}}</p>
	    			</div>
	    			<div class="vali-btn" :class="{'valiok':valiStatus2 == 1}" @click="getStoreValiResult">
	    				{{valiTip}}<inline-loading v-show="noSuccess"></inline-loading>
	    			</div>
	    		</div>
	    	</div>
	    	<div class="demo" v-show="storeType != 14733">
	    		<h3 class="demo-title">修改示例</h3>
	    		<p class="demo-desc" v-show="storeType != 14719">
	    			1.登录{{storeTitle}}2.进入卖家中心 3.进入“出售中的宝贝” 4.点击该商品栏的“编辑宝贝”
	    			5.“宝贝标题”尾处添加上述数字 6.保存提交即可
	    		</p>
	    		<p class="demo-desc" v-show="storeType == 14719">
	    			1.登录京东商家后台2.选择“商品管理"3点击“在售商品管理”4选择上述商品栏的“修改商品”5.在“商品名称”尾处添加上述数字6.保存提交即可。
	    		</p>
	    		<div class="demo-img">
	    			<img v-show="storeType != 14719" src="../../assets/images/coinShop/demo.jpg" height="100%" width="100%"/>
	    			<img v-show="storeType == 14719" src="../../assets/images/coinShop/jd.png" height="100%" width="100%"/>
	    		</div>
	    	</div>
	    	<div class="demo" v-show="storeType == 14733">
	    		<h3 class="demo-title">修改示例</h3>
	    		<p class="demo-desc">
	    			1、您可以进入“我的阿里”找到并进入“供应产品”应用，点击“销售中的产品”。
	    			2、找到您要修改的那条产品，点击“修改”按钮，直接修改信息标题即可。
	    		</p>
	    		<div class="demo-img">
	    			<img src="../../assets/images/share/BBM5L{{ZCJ`GXPPERD4~W3C.jpg" height="100%" width="100%"/>
	    		</div>
	    	</div>
	    	<group label-width="5.5em" label-margin-right="2em" >
		    	<x-input title="手机号码" type="text" v-model="phone" :min="11" :max="11" placeholder="请输入11位本人手机号码"></x-input>
		    	<x-input title="获取验证码" type="text" :show-clear="false" class="weui-vcode" v-model="validateCode">
        			<div class="vali-code vux-1px-l" slot="right" @click="getPhone">获取验证码</div>
      			</x-input>
	    	</group>
	    	<a href="https://www.mofing.com/utils/docs/content/10401.html">
	    		<div class="agreement"><div	 class="text">&lt;&lt;开通宝店协议规则&gt;&gt;</div></div>
	    	</a>	
	    	<div class="btn" @click="submitForm">提交审核</div>
	    	<div class="bottom-bar"></div>
		</div>
	</div>
</template>

<script>
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie'
	import {getUrlParam}  from '@/assets/js/getUrlParam'
	import {iosOrAndr}  from '@/assets/js/isIos'
	import { PopupRadio ,Spinner, GroupTitle, Group, Cell, XInput, Selector, PopupPicker, XButton, XNumber, InlineLoading, XAddress, XTextarea, XSwitch } from 'vux'
	export default{
		name : "personalInfo",
		data(){
			return{
				avatar     : '',
				shopName :'',		//商店名称
				activityType : '',
				activityOptions:['1','2','3'],
				address		  : [],	
				detailAddress : '', //详细地址
				userName : '', 	//用户姓名
				idCard : '', 		//身份证号码
				phone : '', 	//手机号码
				validateCode : '', 	//验证码
				shopIntroduce : '',//商店介绍
				lenImg0	: 0,
				lenImg1 : 0,
				lenImg2 : 0,
				imgU0   : '',
				imgU1   : '',
				imgU2   : '',
				okUrl0   : '',
				okUrl1   : '',
				okUrl2   : '',
				storeInfo    : {},	//商业的商店信息
				storeCate    : {},	//服务范围
				timer        : null,
				addressData  : [] ,
				itemInfo     : {},
				author       : {},
				valiStatus   : false,
				comefrom     : '',
				catId        : '',
				quantity     : 0,	//0首次提交  1修改
				id           : '',  //二次提交用
				storeVali    : {},
				valiTip      : '点击验证',
				valiStatus2   : '',
				noSuccess    : false,
				loadingUp    : false,
				storeType    : '',   //平台Id
				storeTitle	 : '',
				sysType      : ''
			}
		},
		mounted(){
			this.userinfo = this.getParams()
			this.sysType = iosOrAndr()
			this.isWeChat()
			this.fuid = getUrlParam('fuid') || this.$route.query.fuid
			window.cameraResult = this.cameraResult  //ios调用相机
			//调用获取服务范围的方法
			//this.getStoreCate()
			this.storeType   = this.$route.query.cat_id
			console.log(this.storeType)
			//判断是不是通过分享进来的
			this.shopid = this.$route.query.shop_id	
			if(!this.shopid){			
				//店铺信息
				this.itemInfo = JSON.parse(localStorage.getItem('storeAvatar'))
				//制作着信息，已废除
				this.author   = JSON.parse(localStorage.getItem('author'))
				
				this.getStoreVali()	
				this.avatar   = this.itemInfo.face_path
				this.shopName = this.itemInfo.shop_name
			}else{
				this.getStoreByLink()
			}
					
			//this.fillInfo()
			//this.getBackInfo()
		},
		methods:{
			//通过链接认领店铺
			getStoreByLink(){
				let info = {
					userinfo : this.getParams(),
					shop_id  : this.shopid
				}
				let url = '/api/onlinestore/getStoreInfo'
				this.$axiosGet(url,{
					data : JSON.stringify(info)
				}).then( res => {
					if(res && res.code != 404){
						this.storeType = res.cat_id
						this.cat_pid   = res.cat_pid
						this.itemInfo = {
							shop_name : res.title,
							shop_link : res.shop_link,
							face_path : res.face_path
						}
						this.author = {
							demand_id : res.demand_id,
							shop_id   : res.shop_id,
							maker_uid : res.maker_uid,
							maker_description : res.maker_description
						}
						this.avatar   = res.shop_face_path
						this.shopName = this.itemInfo.shop_name
						this.getStoreVali(res.demand_id)
					}
					if(res.code == 404){
						this.$vux.toast.text('店铺信息获取失败')
					}
						
				})
			},
			//获取验证结果
			getStoreValiResult(){
				if(this.valiTip === '正在验证' || this.valiTip === '验证成功'){
					return
				}
				let urls = ''				
				if(this.storeType == 14718){
					urls = '/api/tmall/validateLink'	//天猫
				}else if(this.storeType == 14717){
					urls = '/api/taobao/validateLink'	//淘宝
				}else if(this.storeType == 14719){			
					urls = '/api/jd/validateLink'	//京东
				}else{
					urls = '/api/alibaba/validateLink'
				}
				this.valiTip = '正在验证'
				this.noSuccess = true
				let info = {
					userinfo : this.getParams(),
					key 	 : this.storeVali.key
				}
				this.$axiosPost(urls,{
					data : JSON.stringify(info)
				}).then( res => {
					if(res.status == 1){
						this.noSuccess  = false
						this.valiTip = '验证成功'
						this.valiStatus2 = res.status
					}
					if(res.status == 0){
						this.noSuccess  = false
						this.valiTip = '验证失败'
					}
				})
			},
			//获取验证店铺的信息
			getStoreVali(mid){
				let info = {
					userinfo : this.getParams(),
					id : mid || getCookie('mid')
				}
				let urls = ''
				console.log(urls)
				if(this.storeType == 14718){
					urls = '/api/tmall/getGoods'	//天猫
					this.storeTitle = '天猫'
				}else if(this.storeType == 14717){
					urls = '/api/taobao/getGoods'	//淘宝
					this.storeTitle = '淘宝'
				}else if(this.storeType == 14719){
					urls = '/api/jd/getGoods'		//京东
				}else{
					urls = '/api/alibaba/getgoods'
				}
				this.$vux.loading.show({text:'数据加载中'})
				this.$axiosPost(urls,{
					data : JSON.stringify(info)
				}).then( res => {
					this.$vux.loading.hide()
					if(res && res.code != 404){
						this.storeVali = res
					}
				})
			},
			//失败的信息
//			fillInfo(){
//				
//			},
			//回到上一页 （现用app的返回）
			backGo(){
				//this.$router.push({path:'/getStore',query:{id:getCookie('mid')}})
				if(this.shopid){
					this.$closeWin()
				}else{
					this.$router.go(-1)
				}
				
			},
			//表单提交
			submitForm(){
				for(let item in this.storeCate){
					if(this.activityType === this.storeCate[item]){
						this.catId = item
					}
				}				
				let shopInfo = {
					userinfo     : this.userinfo,
					id           : this.id,
					partform_type: this.cat_pid == 14732 ? 'direct' : 'onlinestore', 
					demand_id    : this.cat_pid == 14732 ? '' : this.author.demand_id,
					shop_id      : this.author.shop_id,
					shop_name    : this.itemInfo.shop_name,
					shop_url     : this.itemInfo.shop_link,
					maker_uid    : '',
					maker_description   : '',
					storeAvatar	 : this.okUrl0 || this.itemInfo.face_path,
					storeName    : this.shopName,
					catName 	 : this.activityType,
					userName     : this.userName,
					scardid      : this.idCard,
					scard_1		 : this.okUrl1,
					phone        : this.phone,
					validateCode : this.validateCode,
					catId        : this.catId,
					comefrom     : this.comefrom,
					quantity     : this.quantity,
					licencePath  : this.okUrl2

				}
				
				


//				if(this.sysType === 'ios' && this.comefrom === 1){
//					shopInfo.storeAvatar = this.avatar
//					shopInfo.scard_1	 = this.imgU1
//				}
				console.log(shopInfo)
				let result = this.validateForm()
				if(result.status){
					//存在fuid并且不为0
					//if(this.fuid && this.fuid != '0'){
						this.$vux.loading.show()
						shopInfo.fuid = this.fuid
						this.$axiosPost('/api/onlinestore/releaseDemand',{
							data : JSON.stringify(shopInfo)
						}).then(res => {
							this.$vux.loading.hide()
							if(res.code === 200){
								this.$router.replace({path:'/examine',query:{status:0,fromin:getCookie('type')}})
								localStorage.removeItem('backfill')
							}
						})	
					//}
					//不存在fuid或者fuid==0
//					if(!this.fuid || this.fuid == '0'){
//						sessionStorage.setItem('shopInfo',JSON.stringify(shopInfo))
//						this.$router.replace({path:'/queryServerNum',query:{status:0,fromin:getCookie('type')}})
//					}
				}else{
					this.$vux.toast.text(result.msg, 'top')
				}
			},
			//回填之前提交的数据
//			getBackInfo(){
//				let has = this.$route.query.hasBack	
//				if(has){
//					let info = {
//						userinfo : this.getParams(),
//						demand_id : this.itemInfo.id
//					}
//					this.$axiosPost('/api/onlinestore/reedit',{
//						data : JSON.stringify(info)
//					}).then(res => {					
//						if(res){
//							this.okUrl0   = res.storeAvatar
//							this.okUrl1   = res.scard_1
//						    this.shopName = res.storeName
//							this.userName = res.uname
//							this.activityType  = res.catName
//							this.catId    = res.catId
//							this.idCard   = res.scardid
//							this.phone    = res.phone
//							this.avatar   = res.storeAvatar
//							this.imgU1    = res.scard_1
//							this.id       = res.id
//							this.quantity = 1
//						}
//					})
//				}					
//			},
			//判断是否在微信中
			isWeChat(){
				let agent = navigator.userAgent.toLowerCase();
			    if (agent.match(/MicroMessenger/i) == "micromessenger") {
			    	this.$wxConfig()
			       	this.comefrom  = 2
			    } else {
			        this.comefrom  = 1
			    }
			},
			//获取url中的参数
			getParams(){
				let userinfo = {
					uid   : getUrlParam('uid')   || getCookie('uid'),
					token : getUrlParam('token') || getCookie('token')
				}				
				return userinfo
			},
			//获取手机验证码
			getPhone(e){
				let time = 60
				if(this.phone.length !== 11){
					this.$vux.toast.text('请输入11位手机号码','top')
					return
				}
				if(e.target.innerText !== '获取验证码'){
					return
				}
				if(this.timer){
					clearInterval(this.timer)
				}				
				if(e.target.innerText === '获取验证码'){
					this.timer = setInterval(()=>{
						e.target.innerText = --time
						if(e.target.innerText === '0'){
							e.target.innerText = '获取验证码'
							clearInterval(this.timer)
						}
					},1000)					
					this.$axiosPostno('/utils/sms/sendcode.json',{
							phone : this.phone,
							type  : 7						
					}).then( res => {
						
					})

				}					
			},
			//获取服务范围
			getStoreCate(){
				let info = {
					userinfo : this.getParams()
				}
				this.$axiosPost('/api/store/getStoreCate',{
					data : JSON.stringify(info)
				}).then( res => {
					if(res){
						this.storeCate = res
					}else{
						this.$vux.toast.text('数据加载失败','top')
					}
				})
			},
			//ios返回的图片路径
			cameraResult(type,fullPath,path){	
				if(type){
					if(type === 'face'){
						this.avatar = fullPath
						this.okUrl0 = path
					}
					if(type === 'cid_front'){
						this.imgU1 = fullPath
						this.okUrl1 = path
					}
					if(type === 'company'){
						this.imgU2 = fullPath
						this.okUrl2 = path
					}
				}
			},
			autoClick(index) {
				//微信中的图片上传
				if(this.comefrom === 2){
					if(index === 0){
						let type = ['album', 'camera']
						this.getWxUpId("avatar","okUrl"+index,type)
					}else{
						let type = ['camera']
						this.getWxUpId("imgU"+index,"okUrl"+index,type)
					}
					return
				}
				//ios中的图片上传
				if(this.sysType === 'ios' && this.comefrom === 1){
					this.iosUpload(index)
					return
				}
				//安卓中的图片上传
				if(index === 0){
					document.getElementById("upfile0").click();
				}else if(index === 1){
					document.getElementById("upfile1").click();	
				}else{
					document.getElementById("upfile2").click();	
				}
			},
			getWxUpId(name,okName,type){
				let _this = this
				this.$wxUploadImg({count: 1,sourceType:type},
				function(localId){
					_this[name] = localId;
				},function(data,localId){
					_this[okName] = data.url;//data.fullurl;
//					console.log("相对地址："+data.url)
//					console.log("绝对地址："+data.fullurl)
//					console.log("单条上传完毕，返回单条对象")
				},function(data){
//					console.log("所有上传完毕，返回对象数组")
				});
			},
			iosUpload(index){
				if(index === 0){
					this.$iosOpenAPI({type:'face'})
				}
				if(index === 1){
					this.$iosOpenAPI({type:'cid_front'})
				}
				if(index === 2){
					this.$iosOpenAPI({type:'company'})
				}
			},
			//上传文件
			onFileChange0($event,index) {		
				let self = this;
				this.$vux.loading.show({text:'上传中'})
				this.lenImg0 = $event.target.files.length;
				if(this.lenImg0 === 0) {
					return;
				}		
				let fileArr = $event.target.files;
				var file=fileArr[0];
				var reader = new FileReader();				                       		                       
		            reader.onload = function (e) {	
		            	self.imgU0 = e.target.result;
				        	self.$axiosPostno('/utils/files/uploadbase64.json',{
				    			upload : self.imgU0
					        }).then(res=>{
					        	self.$vux.loading.hide()
					        	if(res.code === 200){
					        		self.okUrl0 = res.data.path
					        		self.avatar = res.data.fullpath
					        	}
					        })
			        }
		            reader.readAsDataURL(file);
			},
			//上传文件
			onFileChange2($event,index) {		
				let self = this;
				this.$vux.loading.show({text:'上传中'})
				this.lenImg2 = $event.target.files.length;
				if(this.lenImg2 === 0) {
					return;
				}		
				let fileArr = $event.target.files;
				var file=fileArr[0];
				var reader = new FileReader();				                       		                       
		            reader.onload = function (e) {	
		            	self.imgU2 = e.target.result;
				        	self.$axiosPostno('/utils/files/uploadbase64.json',{
				    			upload : self.imgU2
					        }).then(res=>{
					        	self.$vux.loading.hide()
					        	if(res.code === 200){
					        		self.okUrl2 = res.data.path
					        		//self.avatar = res.data.fullpath
					        	}
					        })
			        }
		            reader.readAsDataURL(file);
			},
			//上传文件
			onFileChange1($event,index) {		
				let self = this;
				this.$vux.loading.show({text:'上传中'})
				this.lenImg1 = $event.target.files.length;
				if(this.lenImg1 === 0) {
					return;
				}		
				let fileArr = $event.target.files;
				var file=fileArr[0];
				var reader = new FileReader();				                       		                       
		            reader.onload = function (e) {	
		            	self.imgU1 = e.target.result;
				        	self.$axiosPostno('/utils/files/uploadbase64.json',{
				    			upload :  self.imgU1
					        }).then(res=>{
					        	self.$vux.loading.hide()
					        	if(res.code === 200){
					        		self.okUrl1 = res.data.path
					        	}
					        })
		            }
		            reader.readAsDataURL(file);
			},
			//验证身份证号
			idCardVaild(){
				let codeinfo = {
					userinfo : this.getParams(),
					idCardVaild : this.idCard
				}
				if(this.idCard){
					this.$axiosPost('/api/Store/idCardVaild',{
						data : JSON.stringify(codeinfo)
					}).then( res => {
						if(res.status === 0){
							this.$vux.toast.text(res.msg,'top')
							this.cardResult = false
						}
						if(res.status === 1){
							this.cardResult = true
						}
					})
				}
			},
			//表单验证
			validateForm(){
				let result = {
					status : false,
					msg    : ''
				}
				if(!this.shopName){
					result.msg = '请填写店铺名称'
					return result
				}
//				if(!this.activityType){
//					result.msg = '请填写主营业务'
//					return result
//				}
				if(!this.userName){
					result.msg = '请填写您的姓名'
					return result
				}
				if(!this.cardResult){
					result.msg = '请输入正确的身份证号'
					return result
				}
				if(!this.valiStatus2){
					result.msg = '请验证店铺'
					return result
				}
				if(!this.imgU1){
					result.msg = '请上传您本人身份证照'
					return result
				}
				if(this.phone.length < 11){
					result.msg = '请输入11位手机号码'
					return result
				}
				if(!this.valiStatus){
					result.msg = '请输入正确的验证码'
					return result
				}
				result.status = true
				return result
			}
		},
		watch:{
			validateCode(){
				if(this.validateCode.length === 6 && this.phone){
					let codeinfo = {
						userinfo : this.getParams(),
						phone : this.phone,
						code  : this.validateCode
					}
					this.$axiosPost('/api/store/smsVaild',{
						data : JSON.stringify(codeinfo)
					}).then( res => {
						if(res.status === 0){
							this.valiStatus = false
							this.$vux.toast.text(res.msg,'top')
						}
						if(res.status === 1){
							this.userinfo.uid   = res.uid,
							this.userinfo.token = res.token
							this.valiStatus = true
						}
					})
				}
			}
		},
		computed:{
			storeCates(){
				let cates = []
				if(this.storeCate){
					for(let item in this.storeCate){
						cates.push(this.storeCate[item])
					}
					return cates
				}
			}
		},
		components:{
			Group,
	        GroupTitle,
	        Cell,
	        XInput,
	        Selector,
	        PopupPicker,
	        XAddress,
	        XNumber,
	        XTextarea,
	        XSwitch,
	        PopupRadio,
	        XButton,
	        InlineLoading,
	        Spinner
		}
	}
</script>

<style lang="less" scoped>
	@import '~styles/mixin.less';
	@import '~vux/src/styles/1px.less';
	.personal /deep/ .weui-cells{
		margin-top: 0;
	}
	.personal /deep/ .weui-label{
		white-space: nowrap;
	}
	.personal /deep/ .weui-btn{	
		background:#ff1351;
	}
	.personal /deep/ .weui-switch{
		background:#ff1351 ;
	}
	.personal /deep/ .weui-switch:checked{
		border-color:#ff1351;
	}
	.personal /deep/ .weui-cells_radio{
		max-height: 3rem;
	}
	.personal{
		text-align: left;
		background: #fff;
		.warrp{
			position: relative;
			overflow:hidden;
			margin-top: 0;
			width:100%;
			height: 4.6rem;
			.iphonex;
			.back-icon{
				z-index: 199;
				position: absolute;
				top: .65rem;
				left: .3rem;
				height: .5rem;
				width: .5rem;
				line-height: .5rem;
				text-align: center;
				font-size: .24rem;
				color: #fff;
				background: rgba(0,0,0,.3);
				border-radius: 50%;
			}
			.header-title{
				z-index: 199;
				position: absolute;
				width: 2rem;
				left: 50%;
				top: .35rem;
				margin-left: -1rem;
				text-align: center;
				color: #fff;
				font-size: .34rem;
				text-shadow: .05rem .05rem .1rem rgba(0,0,0,.5);
			}
			.avatar{
				position: absolute;
				left: 50%;
				top: 50%;
				margin-top: -1rem;
				margin-left: -1rem;
				z-index: 99;
				height: 2rem;
				width: 2rem;
				border: 1px solid #fff;
				border-radius: 50%;
				.upload_imgs{
					width: 100%;	
					height: 100%;							
					display: flex;
					flex-flow: wrap;				
					align-items: center;	
					position: relative;
					img{
						height: 100%;
						width: 100%;
						border-radius: 50%;
					}	
				}
				.desc{
					width: 100%;
					line-height: .5rem;
					text-align: center;
					z-index: 100;
					color: #fff;
					font-size: .2rem;
					text-shadow: .05rem .05rem .1rem rgba(0,0,0,.5);
				}
			}
			.bg-img{
				z-index: -100;
				width: 100%;
				height: 100%;
				filter: blur(.2rem);
			}	
			.drop{
				position: absolute;
				left: 0;
				top: 0;
				z-index: 50;
				height: 100%;
				width: 100%;
				background: rgba(255,255,255,.2);
			}		
		}
		.title{
			line-height: .8rem;
			text-align: center;
		}
		.vali-content{
			position: relative;
			padding: 0 .3rem .6rem .3rem;
			display: flex;
			.avatar{
				overflow: hidden;
				height: 1.6rem;
				width: 1.6rem;
				border-radius: .1rem;
			}
			.vali-desc{
				flex: 1;
				margin-left: .2rem;
				text-overflow:ellipsis ;
				overflow: hidden;
				.desc{
					height: .64rem;
				}
				.desc2{
					height: .64rem;
					font-size: .24rem;
					margin-top: .3rem;
					color:#9a9a9a ;
				}
			}
			.vali-btn{
				position: absolute;
				bottom: .1rem;
				right: .4rem;
				width: 1.8rem;
				height: .5rem;
				line-height: .5rem;
				text-align: center;
				color: #2a64f7;
				border: 1px solid #2a64f7;
				border-radius: .3rem;
				font-size: .2rem;
			}
			.valiok{
				border-color: #7ec420;
				color: #7ec420;
			}
		}
		.split{
			height: .28rem;
			background: #eee;
		}
		.demo{
			padding: .2rem .3rem;
			background: #eee;
			.demo-title{
				line-height: .6rem;
			}
			.demo-desc{
				color: #666666;
				font-size: .2rem;
			}
			.demo-img{
				overflow: hidden;
				margin: 0 auto;
				margin-top: .1rem;
				width: 80%rem;
			}
		}
		.agreement{
			padding: 0 .3rem;
			line-height: 1rem;
			color: #d49931;
			.text{
				margin: .3rem auto;
				min-width: 2.9rem;
				height: .4rem;
				line-height: .4rem;
				text-align: center;
			}
		}
		.vali-code{
			width: 1.4rem;
			padding-left: .2rem;
			text-align: center;
			font-size: .24rem;
			color: #7ec420;
		}
		.id-cart{
			position: relative;
			display: flex;
			padding: .2rem .3rem;
			height: .1.2rem;	
			line-height: 1.2rem;
			font-size: .34rem;	
			.left{
				height: .88rem;
				white-space: nowrap;
				width: 1.88rem;
				height: 100%;				
				margin-right: .68rem;				
			}
			.right{
				position: relative;
				flex: 1;				
				font-size: .28rem;
				color: #757575;
				text-align: right;	
				.upload_imgs {
					position: absolute;
					right: 0;
					width: 60%;	
					height: 1.2rem;								
					border: 1px dashed #ccc;
					border-radius: .15rem;
					display: flex;
					flex-flow: wrap;				
					align-items: center;		
					.desc{
						width: 100%;
						font-size: .5rem;
						color: #ccc;
						text-align: center;
					}	
					.uploading{
						z-index: 150;
						position: absolute;
						right: 40%;
						top: -.2rem;
					}	
					#showImg {					
						width: 60%;
						height: 1rem;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%,-50%);
					}
				}
			}
		}
		.btn{
			margin: 0 auto;
			width: 90%;
			height: .8rem;
			line-height: .8rem;
			text-align: center;
			background: #7ec420;
			color: #fff;
			border-radius: .1rem;
		}
		.bottom-bar{
			height: .3rem;
			background: #fff;
		}
	}
</style>